<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a lay-href="">主页</a>
    <a><cite>用户列表</cite></a>
  </div>
</div>
<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-tab layui-tab-brief">
      <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
          <div class="layui-row">
            <div class="layui-form" style="float:right; margin-bottom: 10px;">
              <div class="layui-form-item" style="margin:0;">
                <div class="layui-input-inline">
                  <input type="text" name="createTimeStart" id="createTimeStart" autocomplete="off" placeholder="开始时间" class="layui-input">
                </div>
                <div class="layui-input-inline">
                  <input type="text" name="createTimeEnd" id="createTimeEnd" autocomplete="off" placeholder="结束时间" class="layui-input">
                </div>
                <div class="layui-input-inline">
                  <input type="text" name="username" id="username" placeholder="用户名" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline">
                  <input type="text" name="realName" id="realName" placeholder="真实姓名" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline">
                  <input type="text" name="mobile" id="mobile" placeholder="手机号码" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline">
                  <select name="type" id="type" lay-search="">
                    <option value="">账户类型</option>
                    <option value="1">会员</option>
                    <option value="2">代理码商</option>
                    <option value="3">码商</option>
                    <option value="4">子账号</option>
                  </select>
                </div>
                <div class="layui-input-inline">
                  <select name="status" id="status" lay-search="">
                    <option value="">状态</option>
                    <option value="1">正常</option>
                    <option value="0">禁用</option>
                    <option value="-1">待审核</option>
                    <option value="-2">审核不通过</option>
                  </select>
                </div>
                <div class="layui-input-inline" style="width: 250px;">
                  <button id="search" class="layui-btn" data-type="reload">搜索</button>
                  <a class="layui-btn layui-btn-normal" lay-href="/user/add">添加</a>
                </div>
              </div>
            </div>
          </div>
          <table id="Code_User_dataAll" lay-filter="Code_User_dataAll"></table>
        </div>
      </div>
    </div>
  </div>
</div>

<script type="text/html" id="operateBar">
  <a class="layui-btn layui-btn-warm layui-btn-xs" title="清理用户余额" lay-event="clean"><i class="layui-icon">&#xe639;</i></a>
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
layui.use(['admin', 'table', 'util', 'laydate'], function(){
  var $ = layui.$
  ,admin = layui.admin
  ,table = layui.table
  ,element = layui.element
  ,laydate = layui.laydate
  ,form = layui.form;

  element.render('breadcrumb', 'breadcrumb');

  var tplStatus = function (d) {
    if (d.status == -1) {
      return "<span style='color: orange'>待审核</span>";
    } else if (d.status == -2) {
      return "<span style='color: red'>不通过</span>";
    } else if (d.status == 0) {
      return "<span style='color: rebeccapurple'>禁用</span>";
    } else if (d.status == 1) {
      return "<span style='color: darkgreen'>正常</span>";
    }
  };

  var tplType = function (d) {
    if (d.type == 1) {
      return "会员";
    } else if (d.type == 2) {
      return "代理码商";
    } else if (d.type == 3) {
      return "码商";
    }else if (d.type == 4) {
      return "子账号";
    }
  };

  //用户列表
  table.render({
    elem: '#Code_User_dataAll'
    ,url: layui.setter.baseUrl + '/user/list'
    ,where: {
        access_token: layui.data(layui.setter.tableName).access_token
    }
    ,id: 'tableReload'
    ,page: true
    ,cols: [[
      {field: 'username', title: '登陆名'}
      ,{field: 'type', title: '类型', templet: tplType}
      ,{field: 'realName', title: '真实姓名'}
      ,{field: 'status', title: '状态', templet: tplStatus}
      ,{field: 'todayTotalProfit', title: '今日收益'}
      ,{field: 'yesterdayTotalProfit', title: '昨日收益'}
      ,{field: 'deposit', title: '保证金'}
      ,{field: 'balance', title: '余额'}
      ,{field: 'canSettAmount', title: '可结算余额'}
      ,{field: 'rate', title: '费率', templet: '<div>{{(d.rate*100).toFixed(2)}}%</div>'}
      ,{field: 'totalCollAmount', title: '总收款'}
      ,{field: 'totalCollProfit', title: '总收益'}
      ,{field: 'edit', title: '操作', width: 200, toolbar: '#operateBar' }
    ]]
    ,skin: 'line'
  });

  //监听工具条
  table.on('tool(Code_User_dataAll)', function (obj) {
    var data = obj.data;
    if (obj.event === 'detail') {
      location.hash = "/user/detail/id=" + data.id;
    } else if (obj.event === 'edit') {
      location.hash = "/user/edit/id=" + data.id;
    } else if (obj.event === 'del') {
      layer.confirm('确认删除么？', {icon: 3, title:'警告!'}, function (index) {
        admin.req({
          type: 'get',
          url: layui.setter.baseUrl + '/user/del',
          data: {
            id: data.id,
          },
          success: function(res){
            if(res.code == 0) {
              layer.msg('删除成功', {
                icon: 1
              });
              table.reload("tableReload");
            }
          }
        });
      });
    } else if (obj.event === 'clean') {
      layer.confirm('确认清理用户余额及可结算余额么？', {icon: 3, title:'警告!'}, function (index) {
        admin.req({
          type: 'get',
          url: layui.setter.baseUrl + '/user/clean',
          data: {
            id: data.id,
          },
          success: function(res){
            if(res.code == 0) {
              layer.msg('清理成功', {
                icon: 1
              });
              table.reload("tableReload");
            }
          }
        });
      });
    }
  });

  // 搜索
  var $ = layui.$, active = {
    reload: function(){
      var username = $('#username').val();
      var realName = $('#realName').val();
      var mobile = $('#mobile').val();
      var type = $('#type').val();
      var status = $('#status').val();
      var createTimeStart = $('#createTimeStart').val();
      var createTimeEnd = $('#createTimeEnd').val();
      //执行重载
      table.reload('tableReload', {
        page: {
          curr: 1 //重新从第 1 页开始
        }
        ,where: {
          username: username,
          realName: realName,
          mobile : mobile,
          type : type,
          status : status,
          createTimeStart : createTimeStart,
          createTimeEnd : createTimeEnd
        }
      });
    }
  };
  $('#search').on('click', function() {
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });

  laydate.render({
    elem: '#createTimeStart'
    ,type: 'datetime'
    ,format: 'yyyy-MM-dd HH:mm:ss'
  });

  laydate.render({
    elem: '#createTimeEnd'
    ,type: 'datetime'
    ,format: 'yyyy-MM-dd HH:mm:ss'
  });
  // 渲染表单
  form.render();
});
</script>